<template>
  <div>
    <myheaders></myheaders>
    <br /><br />
    <!-- 面包屑导航 -->
    <Breadcrumb :datas="datas"></Breadcrumb>
    <section class="featured-block text-center">
      <div class="container">
        用户名：<input type="text" v-model="username" /> <br /><br />
        密码：<input type="password" v-model="password" /><br /><br />
        验证码：<input type="text" v-model="code" /><br /><br />
        <img :src="src" @click="changeimg" /><br /><br />
        <Button @click="submit">注册</Button
        ><Button color="green" @click="clear">重置</Button>
      </div>
    </section>
    <myfooters></myfooters>
  </div>
</template>


 
<script>
// 导入头部组件
import myheader from "./myheader";
// 导入尾部组件
import myfooter from "./myfooter";

export default {
  data() {
    return {
      datas: [{ title: "首页", route: { name: "index" } }, { title: "注册" }],
      username: "",
      password: "",
      code: "",
      src: "http://localhost:8000/mycode/"
    };
  },
  mounted: function() {},
  methods: {
    //   提交注册
    submit: function() {
      if (this.username == "") {
        this.$Message("用户名不能为空");
        return false;
      }
      if (this.password == "") {
        this.$Message("密码不能为空");
        return false;
      }
      if (this.code == "") {
        this.$Message("验证码不能为空");
        return false;
      }
      this.axios({
        url: "http://localhost:8000/reg/",
        params: {
          username: this.username,
          password: this.password,
          code: this.code
        }
      }).then(res => {
        this.$Message(res.data.msg);
        this.$router.push("/login");
      });
    },
    // 重置
    clear: function() {
      // 将用户名和密码清空
      (this.username = ""), (this.password = "");
    },
    // 局部刷新验证码
    changeimg: function() {
      // 随机字符串
      var num = Math.ceil(Math.random() * 10);
      // 赋值地址
      this.src = this.src + "?code=" + num;
    }
  },
  //   定义组件
  components: {
    myheaders: myheader,
    myfooters: myfooter
  }
};
</script>
 
<style>
</style>